<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/2
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			.a {
				position: relative;
				right: 60px;
			}
			
			.aa {
				position: relative;
				left: 1300px;
			}
			.context{
				height: 40px;
				width: 200px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
		<!-- Favicon icon -->
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/jquery/jquery.min.js"></script>

		<link rel="icon" type="image/png" sizes="16x16" href="${pageContext.request.contextPath}/backstatic/assets/images/favicon.png">
		<title>文章管理</title>
		<!-- Bootstrap Core CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- This page CSS -->
		<!-- chartist CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
		<!--		<link href="../../../backstatic/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
-->
		<!--c3 CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/c3-master/c3.min.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/style.css" rel="stylesheet">
		<!-- Dashboard 1 Page CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/pages/dashboard.css" rel="stylesheet">
		<!-- You can change the theme colors from here -->
		<link href="${pageContext.request.contextPath}/backstatic/css/colors/default-dark.css" id="theme" rel="stylesheet">

	</head>

	<body class="fix-header fix-sidebar card-no-border">

		<div class="preloader">
			<div class="loader">
				<div class="loader__figure"></div>
				<p class="loader__label">凡一博客园</p>
			</div>
		</div>

		<div id="main-wrapper">

			<header class="topbar">
				<nav class="navbar top-navbar navbar-expand-md navbar-light">
					<div class="navbar-header">
						<a class="navbar-brand" href="index.html">
							<b>
                  				<img src="${pageContext.request.contextPath}/backstatic/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /><span class="dark-logo">凡一博客园</span>
              				</b>
						</a>
					</div>
				</nav>
			</header>

			<aside class="left-sidebar">
				<!-- Sidebar scroll-->
				<div class="scroll-sidebar">
					<!-- Sidebar navigation-->
					<nav class="sidebar-nav">
                        <ul id="sidebarnav">
                            <li>
                                <a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/article/backIndexView" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">后台主页</span></a>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/superAdminView" aria-expanded="false"><i class="mdi mdi-account-check"></i><span class="hide-menu">管理员</span></a>
                            </li>
                            <li class="active">
                                <a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span class="hide-menu">文章</span></a>
                                <ul class="sun-menu">
                                    <li class="active">
                                        <a href="#">查看文章</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/article/ArticleManagerView">管理文章</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">留言</span></a>
                                <ul class="sun-menu">
                                    <li>
										<a href="${pageContext.request.contextPath}/message/messageBackView">留言中心</a>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">评论</span></a>
                                <ul class="sun-menu">
                                    <li>
                                        <a href="#">查看评论</a>
                                    </li>
                                    <li>
                                        <a href="#">管理评论</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="pages-blank.html" aria-expanded="false"><i class="mdi mdi-table menu-icon-inbox"></i><span class="hide-menu">用户</span></a>
                                <ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/user/showUserView">用户中心</a>
									</li>

                                </ul>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/articleIndexView" aria-expanded="false"><i class="mdi mdi-earth"></i><span class="hide-menu">返回前台</span></a>
                            </li>
                            <li>
                                <a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/pages404View" aria-expanded="false"><i class="mdi mdi-help-circle"></i><span class="hide-menu">404</span></a>
                            </li>
                        </ul>
						<div class="text-center m-t-30 a">
							<a href="${pageContext.request.contextPath}/" class="btn waves-effect waves-light btn-info">Log out</a>
						</div>
					</nav>
				</div>
			</aside>

			<div class="page-wrapper">

				<div class="container-fluid">
					<div class="col-md-5 align-self-center">
						<h3 class="text-themecolor">所有文章》》</h3>
					</div>
					<div>
						<div class="panel panel-default">
							<div class="panel-heading">

								<div class="btn-toolbar aa" role="toolbar" style="margin-top: 10px;">

									<form class="form-inline pull-right">
										<input type="text" class="form-control" id="search" placeholder="请输入搜索的内容">
										<button type="submit" class="btn btn-primary pull-right">
										<span class="glyphicon glyphicon-search"></span>
									</button>
									</form>
								</div>
							</div>
							<div class="panel-body">
								<table id="tb" class="table table-hover table-bordered text-center">
									<tr>
										<td class="text-center">ID</td>
										<td class="text-center">标题</td>
										<td class="text-center">作者</td>
										<td class="text-center">类型</td>
										<td class="text-center">内容</td>
										<td class="text-center">加入时间</td>
										<td class="text-center">CQ</td>
									</tr>
									<tbody id="tbody">

									</tbody>
								</table>
							</div>
							<%--    分页--%>

							<div class="row">
								<div class="col-md-6" id="page_info_area">

								</div>
								<div class="col-md-6" id="page_nav_area">

								</div>

							</div>
						</div>
					</div>
				</div>
			</div>

			<%--详情模态框begin--%>
			<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">详情</h4>
						</div>
						<div class="modal-body">
							<div id="articleContent"></div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-info close" data-dismiss="modal">Close</button>
							<%--<button type="button" class="btn btn-primary">Save changes</button>--%>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			<%--详情模态框beginend--%>

			<footer class="footer"> Welcome to fyi world

				<a href="#" title="凡一博客" target="_blank">凡一博客</a>
			</footer>

		</div>


		<!-- Bootstrap popper Core JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<!-- slimscrollbar scrollbar JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/js/perfect-scrollbar.jquery.min.js"></script>
		<!--Wave Effects -->
		<script src="${pageContext.request.contextPath}/backstatic/js/waves.js"></script>
		<!--Menu sidebar -->
		<script src="${pageContext.request.contextPath}/backstatic/js/sidebarmenu.js"></script>
		<!--Custom JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/js/custom.min.js"></script>
		<!-- ============================================================== -->
		<!-- This page plugins -->
		<!-- ============================================================== -->
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.js"></script>

		<script type="text/javascript">
			$(function() {
				function htmlAppend(result){
					//$("#Page").text(null)
					console.log(result);
					$.ajax({
					url:"${pageContext.request.contextPath}/article/selectAllArticle",
					type:"post",
					contentType:"application/json;charset=utf-8",
					dataType:"json",
					success:function (data) {
					console.log(data)
					var $strHtml = "";
						$.each(data.data, function(index, object) {
						    $("#tb tbody").empty();
						$strHtml += "<tr  data-id=" + object.articleId +">";
						$strHtml += "<td align='center'>" + object.articleId + "</td>";
						$strHtml += "<td align='center'>" + object.title + "</td>";
						$strHtml += "<td align='center'>" + object.author + "</td>";
						$strHtml += "<td align='center'>" + object.articleType.typeName+ "</td>";
						$strHtml += "<td align='center'><div class='context'>" + object.articleContent + "</div></td>";
						$strHtml += "<td align='center'>" + object.createTime + "</td>";
						$strHtml += '<td align=\'center\'><button type="button" class="btn btn-info view " data-target="#myModal" data-toggle="modal">详情</button></td>';
						$strHtml += "</tr>";
						});
					$('#tbody').append($strHtml);
					}

				});
			};

				$(".close").click(function () {
					$('#articleContent').text(null)
				})

				/*分页*/
                $(function () {
                    to_page(1);
                })


                function to_page(pageNum) {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/article/articlePageList",
                        data:"pageNum="+pageNum,
                        type:"GET",
                        success:function (result) {
                            htmlAppend(result);
                            build_page_info(result);
                            build_page_nav(result);
                        }
                    });

                }
				function build_page_info(result) {
					$("#page_info_area").empty();
					$("#page_info_area").append("当前"+result.pageNum+"页，总"+result.pages+"页，总"+result.total+"条记录");
					totalRecord = result.total;
					currentPage = result.pageNum;
				}


				/*function build_page_nav(result) {
					console.log(result)
					$("#page_nav_area").empty();
					var ul = $("<ul></ul>").addClass("pagination");
					var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
					var prePageli =  $("<li></li>").append($("<a></a>").append("&laquo;"));
					if(result.hasPreviousPage == false){
						firstPageLi.addClass("disabled");
						prePageli.addClass("disabled");
					}else {
						firstPageLi.click(function () {
							to_page(1);
						});
						prePageli.click(function () {
							to_page(result.pageNum -1);
						});
					}
				}*/


                //解析显示分页条
                function  build_page_nav(result) {
                    $("#page_nav_area").empty();
                    var ul = $("<ul></ul>").addClass("pagination");
                    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
                    var prePageLi = $("<li></li>").append($("<a></a>").append($("<span></span>").append("&laquo;")));
                    if(result.hasPreviousPage == false){
                        firstPageLi.addClass("disabled");
                        prePageLi.addClass("disabled");
                    }
                    //为元素添加点击翻页事件
                    //首页单击事件
                    firstPageLi.click(function () {
                        to_page(1)
                    });

                    //上一页单击事件:当前页-1
                    prePageLi.click(function () {
                        to_page(result.pageNum-1)
                    });

                    //后一页
                    var netPageLi = $("<li></li>").append($("<a></a>").append($("<span></span>").append("&raquo;")));

                    //末页
                    var lastPageLi= $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

                    //如果没有下一页，末页和下一页按钮不可用
                    if(result.hasNextPage == false){
                        netPageLi.addClass("disabled");
                        lastPageLi.addClass("disabled");
                    }

                    //下一页的单点击事件,当前页+1
                    netPageLi.click(function () {
                        to_page(result.pageNum+1);
                    });

                    lastPageLi.click(function () {
                        to_page(result.pages);
                    });
                    //添加首页和前一页的提示
                    ul.append(firstPageLi).append(prePageLi);
                    $.each(result.navigatepageNums,function (index,item) {
                        var numLi = $("<li></li>").append($("<a></a>").append(item));
                        //如果当前页码等于正在循环遍历的页码，则页码变色
                        if(result.pageNum == item){
                            numLi.addClass("active")
                        }

                        //给页码添加单击事件
                        numLi.click(function () {
                            to_page(item)
                        });

                        ul.append(numLi);
                    });
                    //添加下一页和末页的提示
                    ul.append(netPageLi).append(lastPageLi);
                    //创建nav,将ul标签添加到nav标签中
                    var nav = $("<nav></nav>").append(ul);
                    //将分页条添加到上面id中
                    nav.appendTo("#page_nav_area");

                }


				/*详情*/
				$("body").on("click",".view",function () {
					var $id = $(this).parents("tr").data("id");
					console.log($id);
					var $test="";
					$.ajax({
						url:"${pageContext.request.contextPath}/article/selectArticleById/"+$id,
						type: "post",
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						success:function (data) {
							$test += data.data.articleContent;
							console.log($test)
							$('#articleContent').append($test)
						}
					})

				});

			});

		</script>
	</body>

</html>